<div class="editor-row carpetplot-editor">
  <div class="section gf-form-group">
    <h5 class="section-heading">X Axis</h5>
    <gf-form-switch class="gf-form" label-class="width-9" label="Show weekends" checked="ctrl.panel.xAxis.showWeekends" on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form">
      <label class="gf-form-label width-9">Min bucket width</label>
      <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="'Min bucket width in px to show weekend lines.'"
        ng-model="ctrl.panel.xAxis.minBucketWidthToShowWeekends" ng-change="ctrl.render()" ng-model-onblur>
    </div>
    <gf-form-switch class="gf-form" label-class="width-9" label="Show crosshair" checked="ctrl.panel.xAxis.showCrosshair" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-9" label="Hide labels" checked="ctrl.panel.xAxis.hideLabels" on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form">
      <label class="gf-form-label width-9">Label format</label>
      <div class="gf-form-select-wrapper width-9">
        <select class="input-small gf-form-input" ng-model="ctrl.panel.xAxis.labelFormat" ng-options="s.value as s.name for s in ctrl.xAxisLabelFormats"
          ng-change="ctrl.render()"></select>
      </div>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Y Axis</h5>
    <gf-form-switch class="gf-form" label-class="width-9" label="Show crosshair" checked="ctrl.panel.yAxis.showCrosshair" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-9" label="Hide labels" checked="ctrl.panel.yAxis.hideLabels" on-change="ctrl.render()">
    </gf-form-switch>
  </div>
</div>